<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>register</title>
    <link rel="stylesheet" type="text/css" href="register-style.css">
<body>
    <section>
        <div class="container">
            <div class="user signinBx">
                <div class="imgBx"><img src="image/library.jpg"></div>
                <div class="formBx">
                    <form>
                        <h2>Sign In</h2>
                        <input type="text" name="" placeholder="Username" autofocus>
                        <input type="password" name="" placeholder="Password">
                        <input type="submit" name="" value="Login">
                        <p class="register">Don't have an account?<a href="#" onclick="toggleForm();">Sign Up</a></p>
                    </form>
                </div>
            </div>
            <div class="user signupBx">
                <div class="formBx">
                    <form>
                        <h2>create your account</h2>
                        <input type="text" name="" placeholder="create your username" autofocus>
                        <input type="password" name="" placeholder="set your password">
                        <input type="email" name="" placeholder="email address">
                        <input type="submit" name="" value="sign up">
                        <p class="signup">Already have an account?<a href="#" onclick="toggleForm();">LogIn</a></p>
                    </form>
                </div>
                <div class="imgBx"><img src="image/library.jpg"></div>
            </div>
        </div>
    </section>
    <script type="text/javascript">
        function toggleForm() {
            var container = document.querySelector('.container');
            container.classList.toggle('active');
        }
    </script>
</body>

</html>